import Film from "@/components/film";
import { getFilmList } from "@/services/film";
import { InfiniteScroll, Tabs } from "antd-mobile";
import { useMemo, useState } from "react";

const pageSize = 10; // 每页显示条数

const FilmsPage = () => {
  const [type, setType] = useState("1");
  const [page, setPage] = useState(1); // 页码
  const [list, setList] = useState<any[]>([]); // 列表数据
  const [total, setTotal] = useState(1); // 总条数

  // 还是更多
  const hasMore = useMemo(() => {
    return list.length < total;
  }, [list, total]);
  /**
   * 加载更多
   *    默认会根据 hasMore 是否为true 来执行一次
   *    执行之后，如果页面元素没有变化，当前 InfiniteScroll 距离底部的距离没有变化，该函数会重复执行
   */
  const loadMore = async () => {
    console.log("loadMore");
    const { data } = await getFilmList(type, page, pageSize);
    // 修改 list 数据，使用累加
    setList((list) => [...list, ...data.films]);
    // 修改 total
    setTotal(data.total);
    // page ++
    setPage((page) => page + 1);
  };

  /**
   * Tab 选项卡点击
   */
  const handleTabChange = (key: string) => {
    setType(key);
    // 重置 page 为 1
    setPage(1);
    // 清空list数据
    setList([]);
  };

  return (
    <div className="films-page">
      <Tabs onChange={handleTabChange}>
        <Tabs.Tab title="正在热映" key="1"></Tabs.Tab>
        <Tabs.Tab title="即将上映" key="2"></Tabs.Tab>
      </Tabs>

      {list.map((item, index) => {
        return <Film key={item.filmId} {...item} />;
      })}

      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
};

export default FilmsPage;
